<template>
  <div id="main">
    <div>
      <!-- 轮播图 -->
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000"  indicator-color="white">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img  v-lazy="image"/>
          </van-swipe-item>
        </van-swipe>
        <div class="back">
          <el-button icon="el-icon-back" @click="leftClick">Back to home</el-button>
        </div>
      </div>

      <!-- 引用博客列表模块 -->
      <div id="blog-main">
        <BlogList/>
      </div>
      <Blogup/>
     
    </div>
  </div>
</template>

<script>
import TopNavBar from "@/components/TopNavBar.vue";
import BlogList from "./components/BlogList.vue";
import Blogup from "./components/Blogup"
export default {
  name: "Blog",
  components: {
    TopNavBar,
    BlogList,
    Blogup
  },
  data() {
    return {
      rightClick: Function,
      images: [
      require('@/assets/lb1.jpg'),
      require('@/assets/lb2.jpg'),
      require('@/assets/lb3.jpg'),
      require('@/assets/lb4.jpg'),
      ]
    };
  },
  methods: {
    // 导航栏点击，返回主页
    leftClick() {
      console.log("返回主页");
      this.$router.push({ path: "/home" });
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#blog-main {
  margin: 10px;
  margin-bottom: 0;
  float: left;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 130px;
}
.swipe img {
  width: 100%;
  height: 130px;
}
.back{
  position: absolute;
  margin-top: -20px;
}
.el-button {
  background:transparent;
  color: rgb(255, 255, 255);
  width: 60px;
  height: 5px;
  font-size: 5px;
  padding: 7px 10px;
}
</style>